import React from "react";
import { Icon } from "antd";
import classNames from "classnames";
import { inject, observer } from "mobx-react";
import { viewTypes } from "../../../../constants/form";
import "./Header.less";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const { PC, MOBILE } = viewTypes;

@inject('routing')
@observer
export default class PreviewHeader extends React.Component {
  constructor() {
    super();

    this.state = {
      type: 'desktop'
    };
    this.onTypeChange = this.onTypeChange.bind(this);
  }

  onTypeChange(e) {
    const type = e.currentTarget.getAttribute('rel');

    this.setState({ type });
    this.props.onChange(type);
  }

  render() {
    const { history } = this.props.routing;
    const { type } = this.state;

    return (
      <div className='wea-edc-fp-header'>
        <ul>
          <li className={classNames({ active: type === PC })} rel={PC} onClick={this.onTypeChange}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@e8hfvx`} type={PC} /></li>
          <li className={classNames({ active: type === MOBILE })} rel={MOBILE} onClick={this.onTypeChange}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@u70pf3`} type={MOBILE} /></li>
        </ul>
        <div onClick={history.goBack}><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@i2jkbl`} type='left' /><span>{getLabel('502632','返回')}</span></div>
      </div>
    );
  }
}

PreviewHeader.defaultProps = {
  onChange: () => { }
};